<template>
    <!-- 学习中心 -->
    <div class="wrap">
        <!-- <Head choose="1"></Head> -->
        <div class="con">
            <div class="tabLeft">
                <ul>
                    <li :class="tabNum == 0 ? 'seleTabDirectory pseudo' : 'tabDirectory'" @click="tabSwitch(0)">课程目录</li>
                    <li :class="tabNum == 1 ? 'seleTabUserData pseudo' : 'tabUserData'" @click="tabSwitch(1)">已完成</li>
                    <li :class="tabNum == 2 ? 'seleTabAbility pseudo' : 'tabAbility'" @click="tabSwitch(2)">进行中</li>
                    <li :class="tabNum == 3 ? 'seleTabResume pseudo' : 'tabResume'" @click="tabSwitch(3)">未完成</li>
                </ul>
            </div>
            <div class="tabRight">
                <div class="directoryCon" v-if="tabNum == 0">
                    <ul >
                        <li v-for="(course,index) in courses" :key="course.id">
                            <div class="cir"></div>
                            <p> {{course.name}}</p> 

                            <div class="choose"  @click="hookChoose(index)">
                                <div class="choose1" >
                                    <div class="box1"></div> 
                                    <img src="../assets/hook.png" alt="" :class="course.state ? 'choose1 hook1' : 'choose1 nonehook'">
                                </div>
                            </div>
                        </li>
                    </ul>

                    <div class="Btn" style="float:right;">
                        <el-button @click="study(e)" type="primary">去学习</el-button>
                    </div>

                    <!-- 课程目录弹窗 -->
                    <el-dialog  :visible.sync="dialogFormVisible">
                        <div class="courseDialog">
                            <span>课程订单</span>
                            <table border="1">
                                <tr class="th">
                                    <td>课程名称</td>
                                    <td>学习时长</td>
                                    <td>需要时间</td>
                                    <td>时间单价</td>
                                    <td>总价(懒币)</td>
                                </tr>
                                <tr>
                                    <td>HTML</td>
                                    <td>5小时</td>
                                    <td>5天</td>
                                    <td>2个/小时</td>
                                    <td>10个</td>
                                </tr>
                            </table>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button>
                            <el-button type="danger" @click="dialogFormVisible = false">重 选</el-button>
                        </div>
                    </el-dialog>


                </div>
                <div class="userDataCon" v-if="tabNum == 1">
                        <span>名称</span>
                        <span>用时(天)</span>
                        <span>打赏</span>
                        <hr>
                        <ul >
                            <li v-for="(completed) in courses" :key="completed.id"> 
                               <p> {{completed.name}} </p>
                               <p>{{completed.time}}</p>
                               <p> <el-button type="warning" >打赏</el-button></p>
                            </li>
                        </ul> 
                </div>
                <div class="abilityCon" v-if="tabNum == 2">
                    <span>名称</span>
                    <span>剩余时间</span>
                    <span>打赏</span>
                    <hr>
                    <ul >
                        <li v-for="(ongoing) in courses" :key="ongoing.id"> 
                        <p> {{ongoing.name}} </p>
                        <p>{{ongoing.time}}</p>
                        <p>{{ongoing.money}}</p>
                        </li>
                    </ul> 
                </div>
                <div class="resumeCon" v-if="tabNum == 3">
                    <span>名称</span>
                    <span>剩余时间</span>
                    <span>打赏</span>
                    <hr>
                    <ul >
                        <li v-for="(unfinished) in courses" :key="unfinished.id"> 
                        <p> {{unfinished.name}} </p>
                        <p>{{unfinished.time}}</p>
                        <p>{{unfinished.money}}</p>
                        </li>
                    </ul> 
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tabNum: 0,
            dialogFormVisible: false,
            form: {
            name: "",
            region: "",
            date1: "",
            date2: "",
            delivery: false,
            type: [],
            resource: "",
            desc: ""
            },
            formLabelWidth: "120px",
            courses:[
                {
                    id:0,
                    name:'响应式Web设计',
                    time:'5天',
                    money:33,
                    state:false
                },
                {
                    id:1,
                    name:'算法和数据结构',
                    time:'5天',
                    money:33,
                    state:false
                },
                {
                    id:2,
                    name:'前端库与框架',
                    time:'5天',
                    money:33,
                    state:false
                },
                {
                    id:3,
                    name:'数据可视化',
                    time:'5天',
                    money:33,
                    state:false
                },
                {
                    id:4,
                    name:'API和微服务',
                    time:'5天',
                    money:33,
                    state:false
                },
                {
                    id:5,
                    name:'信息安全和质量保证',
                    time:'5天',
                    money:33,
                    state:false
                },
                {
                    id:6,
                    name:'面试攻略',
                    time:'5天',
                    money:33,
                    state:false
                },
                {
                    id:7,
                    name:'入职指南',
                    time:'5天',
                    money:33,
                    state:false
                },
            ],
            idx:null,
            e:'',
        }
    },
    methods: {
        tabSwitch(num) {
            this.tabNum = num;
        },
        hookChoose(index) {
            this.courses[index].state = !this.courses[index].state;
            console.log(index);
            this.idx = index;
        },
        study(e) {
            // this.dialogFormVisible = true;
            console.log(this.courses[this.idx].state);
            if(this.courses[this.idx].state == true){
                this.dialogFormVisible = true;
            }
        }
    }
}
</script>

<style scoped>
.wrap {
    width: 100%;
    height: 100%;
}

.con {
    display: flex;
    width: 1200px;
    margin: 20px auto 0;
    box-shadow: 1px 3px 9px #ddd;
    border-radius: 10px;
}

.tabLeft li {
    position: relative;
    width: 210px;
    padding-left: 25px;
    line-height: 85px;
    font-size: 21px;
    color: #b3bdc9;
    text-align: center;
}

.tabRight {
    width: 100%;
    background-color: #fff;
}

.tabDirectory {
    background: url('../assets/课程.png') 50px center no-repeat;
    background-size: 26px 28px;
}

.seleTabDirectory {
    color: #0087cf !important;
    background: #fff url('../assets/课程-1.png') 50px center no-repeat;
    background-size: 26px 28px;
}

.tabUserData {
    background: url('../assets/完成.png') 50px center no-repeat;
    background-size: 25px 30px;
}

.seleTabUserData {
    color: #0087cf !important;
    background: #fff url('../assets/完成-1.png') 50px center no-repeat;
    background-size: 25px 30px;
}

.tabAbility {
    background: url('../assets/进行中.png') 50px center no-repeat;
    background-size: 27px 27px;
}

.seleTabAbility {
    color: #0087cf !important;
    background: #fff url('../assets/进行中-1.png') 50px center no-repeat;
    background-size: 27px 27px;
}

.tabResume {
    background: url('../assets/未完成.png') 50px center no-repeat;
    background-size: 26px 23px;
}

.seleTabResume {
    color: #0087cf !important;
    background: #fff url('../assets/未完成-1.png') 50px center no-repeat;
    background-size: 26px 23px;
}

.pseudo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 85px;
    background-color: #0087cf;
}

.tabRight {
    padding: 30px 25px;
}

.tabRight h2 {
    font-weight: 500;
    font-size: 28px;
    margin-bottom: 18px;
}

/* 课程目录 */
.directoryCon ul li p{
    width: 33%;
    display: inline-block;
    line-height: 50px;
    list-style: none;   
    font-size: 23px;
    text-align: left;
    color: #000;
}

/* 已完成 */
 .userDataCon span{
    display: inline-block;
    width: 33%;
    font-size: 23px;
    color: #0087cf;
    line-height: 35px;
    text-align: center;
 }

 .userDataCon ul li p {
    width: 33%;
    display: inline-block;
    line-height: 50px;
    list-style: none;
    font-size: 18px;
    text-align: center;
    background-color: #fff;
 }

/* 进行中 */
.abilityCon span {
    display: inline-block;
    width: 33%;
    font-size: 23px;
    color: #0087cf;
    line-height: 35px;
    text-align: center;
}

.abilityCon ul li p {
    width: 33%;
    display: inline-block;
    line-height: 50px;
    list-style: none;
    font-size: 18px;
    text-align: center;
    background-color: #fff;
}

/* 未完成 */
.resumeCon span {
    display: inline-block;
    width: 33%;
    font-size: 23px;
    color: #0087cf;
    line-height: 35px;
    text-align: center;
}

.resumeCon ul li p {
    width: 33%;
    display: inline-block;
    line-height: 50px;
    list-style: none;
    font-size: 18px;
    text-align: center;
    background-color: #fff;
}

/* 课程弹窗 */
.courseDialog {
    width: 100%
}

.courseDialog span {
    color: #0087cf;
    font-size: 23px;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.courseDialog table {
    width: 80%;
    margin:0 auto;
}

.courseDialog table tr {
    height: 60px;
    text-align: center;
}

.courseDialog table .th {
    background-color: #149ee9;
    color: #fff;
}



/* 技术分享 */
.cir {
  width: 15px;
  height: 15px;
  background-color: #0087cf;
  border-radius: 50%;
  float: left;
  margin-left: 25px;
  margin-top: 17px;
  margin-right: 30px;
}

.choose{
    position: relative;
    width: 70px;
    height: 75px;
    margin-left: 91%;
    margin-top: -6%;
    
  }
  .choose1 {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-left: -9px;
    
  }
  .box1{
    margin:15px auto;
    width: 25px;
    height: 25px;
    background-color: #a4adb1;
    border-radius: 5px;
  }
  .hook1{
    position: absolute;
    top: -3px;
    left: 9px;
    width: 50px;
    height: 50px;
    display: block !important;
  }
  .nonehook{
    display: none;
  }

  hr {
    background-color: #0087cf;
    height: 3px;
}


</style>